<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.2">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"wrr123.github.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.json"};
  </script>

  <meta name="description" content="talk is cheap, show me the code">
<meta property="og:type" content="website">
<meta property="og:title" content="一缕烟气">
<meta property="og:url" content="https://wrr123.github.io/page/34/index.html">
<meta property="og:site_name" content="一缕烟气">
<meta property="og:description" content="talk is cheap, show me the code">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="田园隐士">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://wrr123.github.io/page/34/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'zh-CN'
  };
</script>

  <title>一缕烟气</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="一缕烟气" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">一缕烟气</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">沧海月明珠有泪，蓝田日暖玉生烟</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content index posts-expand">
            
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/03/git-reset%E5%92%8Crevert%E7%9A%84%E5%8C%BA%E5%88%AB/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/07/03/git-reset%E5%92%8Crevert%E7%9A%84%E5%8C%BA%E5%88%AB/" class="post-title-link" itemprop="url">git reset和revert的区别</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-03 13:27:23" itemprop="dateCreated datePublished" datetime="2020-07-03T13:27:23+08:00">2020-07-03</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">版本管理工具</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>1.6k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h4 id="git-reset"><a href="#git-reset" class="headerlink" title="git reset"></a>git reset</h4><h5 id="参数定义"><a href="#参数定义" class="headerlink" title="参数定义"></a>参数定义</h5><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">--soft 回退后a分支修改的代码被保留并标记为add的状态（git status 是绿色的状态）</span><br><span class="line">--mixed 重置索引，但不重置工作树，更改后的文件标记为未提交（add）的状态。默认操作。</span><br><span class="line">--hard 重置索引和工作树，并且a分支修改的所有文件和中间的提交，没提交的代码都被丢弃了。</span><br><span class="line">--merge 和--hard类似，只不过如果在执行reset命令之前你有改动一些文件并且未提交，merge会保留你的这些修改，hard则不会。【注：如果你的这些修改add过或commit过，merge和hard都将删除你的提交】</span><br><span class="line">--keep 和--hard类似，执行reset之前改动文件如果是a分支修改了的，会提示你修改了相同的文件，不能合并。如果不是a分支修改的文件，会移除缓存区。git status还是可以看到保持了这些修改。</span><br></pre></td></tr></table></figure>
<h5 id="分析-hard和-soft的区别"><a href="#分析-hard和-soft的区别" class="headerlink" title="分析--hard和--soft的区别"></a>分析<code>--hard</code>和<code>--soft</code>的区别</h5><ul>
<li><blockquote>
<p>soft参数告诉Git重置HEAD到另外一个commit，但也到此为止。如果你指定—soft参数，Git将停止在那里而什么也不会根本变化。这意味着index,working copy都不会做任何变化，所有的在original HEAD和你重置到的那个commit之间的所有变更集都放在stage(index)区域中。</p>
</blockquote>
</li>
<li><blockquote>
<p>hard参数将会blow out everything.它将重置HEAD返回到另外一个commit(取决于~12的参数），重置index以便反映HEAD的变化，并且重置working copy也使得其完全匹配起来。这是一个比较危险的动作，具有破坏性，数据因此可能会丢失！如果真是发生了数据丢失又希望找回来，那么只有使用：[git reflog]命令了。你的所有本地修改将丢失。如果我们希望彻底丢掉本地修改但是又不希望更改branch所指向的commit，则执行git reset —hard = git reset —hard HEAD. i.e. don’t change the branch but get rid of all local changes.另外一个场景是简单地移动branch从一个到另一个commit而保持index/work区域同步。不过它将修改你的work tree。<br> 这是说hard操作就是以commit合集中的某一元素作为head 的落脚点，并且以它为蓝本，毁掉暂存区记录，本地库和远程库记录，包括源文件，只是为了这一蓝本服务，就好像议会制国家里，轮流执政，突然其中一个议员搞成了中央集权，所有的都向他同化了。</p>
</blockquote>
</li>
<li><blockquote>
<p>mixed是reset的默认参数，也就是当你不指定任何参数时的参数。它将重置HEAD到另外一个commit,并且重置index以便和HEAD相匹配，但是也到此为止。working copy不会被更改。所有该branch上从original HEAD（commit）到你重置到的那个commit之间的所有变更将作为local modifications保存在working area中，（被标示为local modification or untracked via git status)，但是并未staged的状态，你可以重新检视然后再做修改和commit。</p>
</blockquote>
</li>
</ul>
<h4 id="git-revert"><a href="#git-revert" class="headerlink" title="git revert"></a>git revert</h4><h4 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h4><ol>
<li><p>git revert是用一次新的commit来回滚之前的commit；</p>
<p>git reset是直接删除指定的commit。</p>
</li>
<li><p>git reset是把<code>head</code>向后移动了一下，而git revert是<code>head</code>继续前进，只是新的commit的内容和要revert的内容正好相反，能够抵消要被revert的内容。</p>
</li>
<li><blockquote>
<p>在回滚这一操作上看，效果差不多。但是在日后继续merge以前的老版本时有区别。因为git revert是用一次逆向的commit“中和”之前的提交，因此日后合并老的branch时，导致这部分改变不会再次出现，但是git reset是之间把某些commit在某个branch上删除，因而和老的branch再次merge时，这些被回滚的commit应该还会被引入。</p>
</blockquote>
</li>
</ol>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/03/js%E4%B8%AD%E5%AF%B9url%E4%BC%A0%E5%8F%82%E5%8C%85%E5%90%AB%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%E7%9A%84%E5%A4%84%E7%90%86/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/07/03/js%E4%B8%AD%E5%AF%B9url%E4%BC%A0%E5%8F%82%E5%8C%85%E5%90%AB%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%E7%9A%84%E5%A4%84%E7%90%86/" class="post-title-link" itemprop="url">js中对url传参包含特殊字符的处理</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-03 12:38:36" itemprop="dateCreated datePublished" datetime="2020-07-03T12:38:36+08:00">2020-07-03</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>829</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h4 id="特殊字符的含义（十六进制）"><a href="#特殊字符的含义（十六进制）" class="headerlink" title="特殊字符的含义（十六进制）"></a>特殊字符的含义（十六进制）</h4><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:center">符号</th>
<th style="text-align:center">解释</th>
<th style="text-align:center">转义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">#</td>
<td style="text-align:center">用来标定特定的文档位置</td>
<td style="text-align:center">%23</td>
</tr>
<tr>
<td style="text-align:center">%</td>
<td style="text-align:center">对特殊字符进行编码</td>
<td style="text-align:center">%25</td>
</tr>
<tr>
<td style="text-align:center">&amp;</td>
<td style="text-align:center">分割不同的变量值对</td>
<td style="text-align:center">%26</td>
</tr>
<tr>
<td style="text-align:center">+</td>
<td style="text-align:center">在变量值中表示空格</td>
<td style="text-align:center">%2B</td>
</tr>
<tr>
<td style="text-align:center">/</td>
<td style="text-align:center">表示目录路径</td>
<td style="text-align:center">%2F</td>
</tr>
<tr>
<td style="text-align:center">\</td>
<td style="text-align:center">表示目录路径</td>
<td style="text-align:center">%5C</td>
</tr>
<tr>
<td style="text-align:center">=</td>
<td style="text-align:center">用来连接键值对</td>
<td style="text-align:center">%3D</td>
</tr>
<tr>
<td style="text-align:center">?</td>
<td style="text-align:center">表示查询字符串的开始</td>
<td style="text-align:center">%3F</td>
</tr>
<tr>
<td style="text-align:center">空格</td>
<td style="text-align:center">空格</td>
<td style="text-align:center">%20</td>
</tr>
<tr>
<td style="text-align:center">.</td>
<td style="text-align:center">句号</td>
<td style="text-align:center">%2E</td>
</tr>
<tr>
<td style="text-align:center">:</td>
<td style="text-align:center">冒号</td>
<td style="text-align:center">%3A</td>
</tr>
</tbody>
</table>
</div>
<h4 id="js中替换变量使用方法"><a href="#js中替换变量使用方法" class="headerlink" title="js中替换变量使用方法"></a>js中替换变量使用方法</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">str = str.repalce(/\#/g, &#x27;%23&#x27;)</span><br></pre></td></tr></table></figure>
<p><strong>上述的方法如果需要替换的特殊字符比较多的话，会非常麻烦</strong>，故为了解决，使用下面的两个方法</p>
<h4 id="encodeURI"><a href="#encodeURI" class="headerlink" title="encodeURI()"></a>encodeURI()</h4><p>一般用于编码整个URI,因为URI中的合法字符都不会被编码转换。</p>
<p>但是下面的一些特殊字符不会被编码：</p>
<p><code>**! @ # $&amp; * ( ) = : / ; ? + &#39; **</code></p>
<h4 id="encodeURIComponent"><a href="#encodeURIComponent" class="headerlink" title="encodeURIComponent()"></a>encodeURIComponent()</h4><p>把URI字符串采用UTF-8编码格式转化为escape格式的字符串。</p>
<p><strong>一般对传递的参数进行转换。</strong></p>
<h4 id="将url中的特殊字符转换成中文"><a href="#将url中的特殊字符转换成中文" class="headerlink" title="将url中的特殊字符转换成中文"></a>将url中的特殊字符转换成中文</h4><h5 id="函数decodeURI"><a href="#函数decodeURI" class="headerlink" title="函数decodeURI()"></a>函数decodeURI()</h5><p><code>decodeURI()</code> 函数能解码由<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI</code></a> 创建或其它流程得到的统一资源标识符（URI）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 一个例子</span></span><br><span class="line"><span class="keyword">const</span> uri = <span class="string">&#x27;https://mozilla.org/?x=шеллы&#x27;</span>;</span><br><span class="line"><span class="keyword">const</span> encoded = <span class="built_in">encodeURI</span>(uri);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(encoded);</span><br><span class="line"><span class="comment">// expected output: &quot;https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="built_in">decodeURI</span>(encoded));</span><br><span class="line">  <span class="comment">// expected output: &quot;https://mozilla.org/?x=шеллы&quot;</span></span><br><span class="line">&#125; <span class="keyword">catch</span> (e) &#123; <span class="comment">// catches a malformed URI</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">error</span>(e);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/03/response%E5%93%8D%E5%BA%94%E5%AF%B9%E8%B1%A1%E8%AF%A6%E8%A7%A3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/07/03/response%E5%93%8D%E5%BA%94%E5%AF%B9%E8%B1%A1%E8%AF%A6%E8%A7%A3/" class="post-title-link" itemprop="url">response响应对象详解</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-03 10:18:30" itemprop="dateCreated datePublished" datetime="2020-07-03T10:18:30+08:00">2020-07-03</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/java/" itemprop="url" rel="index"><span itemprop="name">java</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>585</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h4 id="对象介绍"><a href="#对象介绍" class="headerlink" title="对象介绍"></a>对象介绍</h4><ol>
<li><p>负责向客户端（浏览器）发送数据的相关方法</p>
<ol>
<li>getOutputStream()</li>
<li>getWriter()</li>
</ol>
</li>
<li><p>负责向客户端（浏览器）发送响应头的相关方法</p>
<p><img src="http://localhost:4000/2020/07/03/response%E5%93%8D%E5%BA%94%E5%AF%B9%E8%B1%A1%E8%AF%A6%E8%A7%A3/11.png" alt></p>
</li>
<li><p>负责向客户端（浏览器）发送响应状态码的相关方法</p>
<p><img src="http://localhost:4000/2020/07/03/response%E5%93%8D%E5%BA%94%E5%AF%B9%E8%B1%A1%E8%AF%A6%E8%A7%A3/22.png" alt></p>
</li>
<li><p>响应状态码的常量</p>
<p><img src="http://localhost:4000/2020/07/03/response%E5%93%8D%E5%BA%94%E5%AF%B9%E8%B1%A1%E8%AF%A6%E8%A7%A3/33.png" alt></p>
</li>
</ol>
<h4 id="对象常见应用"><a href="#对象常见应用" class="headerlink" title="对象常见应用"></a>对象常见应用</h4><ol>
<li><h5 id="使用OutputStream流向客户端输出中文数据"><a href="#使用OutputStream流向客户端输出中文数据" class="headerlink" title="使用OutputStream流向客户端输出中文数据"></a>使用OutputStream流向客户端输出中文数据</h5></li>
<li><h5 id="使用PrintWriter流向客户端输出中文数据"><a href="#使用PrintWriter流向客户端输出中文数据" class="headerlink" title="使用PrintWriter流向客户端输出中文数据"></a>使用PrintWriter流向客户端输出中文数据</h5></li>
<li><h5 id="文件下载"><a href="#文件下载" class="headerlink" title="文件下载"></a>文件下载</h5><p>基本实现思路：</p>
<ol>
<li>获取要下载的文件的绝对路径</li>
<li>获取要下载的文件名</li>
<li>设置<code>content-disposition</code>响应头控制浏览器以下载的形式打开文件</li>
<li>获取要下载的文件输入流</li>
<li>创建数据缓冲区</li>
<li>通过<code>response</code>对象获取<code>OutputStream</code>流</li>
<li>将FileInputStream流写入到buffer缓冲区</li>
<li>使用OutputStream将缓冲区的数据输出到客户端(浏览器)</li>
</ol>
<p><strong>在编写下载功能时，要使用OutputStream流，避免使用PrintWriter流，因为OutputStream流是字节流，可以处理任意类型的数据，而PrintWriter流是字符流，只能处理字符数据，如果用字符流处理字节流，会导致数据丢失。</strong></p>
</li>
</ol>
<h4 id="主要功能介绍"><a href="#主要功能介绍" class="headerlink" title="主要功能介绍"></a>主要功能介绍</h4><ol>
<li><p>设置响应头信息</p>
<p><code>addHeader(“reFresh”, “5;URL=xxxx”);</code></p>
</li>
<li><p>发送状态码</p>
<p><code>sendError(404);</code></p>
</li>
<li><p>设置响应正文</p>
<p><code>getWriter().print(“fdsfdsa”);</code></p>
</li>
<li><p>重定向</p>
<p><code>sendRedirect(“path”);</code></p>
</li>
</ol>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/02/freemarker%E4%B9%8Bhtml%E9%A1%B5%E9%9D%A2%E4%BC%A0%E5%8F%82/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/07/02/freemarker%E4%B9%8Bhtml%E9%A1%B5%E9%9D%A2%E4%BC%A0%E5%8F%82/" class="post-title-link" itemprop="url">freemarker之html页面传参</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-02 16:31:17" itemprop="dateCreated datePublished" datetime="2020-07-02T16:31:17+08:00">2020-07-02</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>250</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h5 id="使用freemarker的基本语法"><a href="#使用freemarker的基本语法" class="headerlink" title="使用freemarker的基本语法"></a>使用freemarker的基本语法</h5><p><code>$&#123;变量名称&#125;</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fileId = <span class="string">&#x27;$&#123;fileId&#125;&#x27;</span></span><br><span class="line"><span class="keyword">var</span> fileId = <span class="string">&#x27;$&#123;fileId?js_string&#125;&#x27;</span></span><br></pre></td></tr></table></figure>
<p><strong>和在html标签中使用是一样的</strong></p>
<p><strong>在html界面中引入的javascript文件中是不行的，必须在html本页面上内联的javascript语句中执行</strong></p>
<p><img src="http://localhost:4000/2020/07/02/freemarker%E4%B9%8Bhtml%E9%A1%B5%E9%9D%A2%E4%BC%A0%E5%8F%82/22.png" alt></p>
<p><img src="http://localhost:4000/2020/07/02/freemarker%E4%B9%8Bhtml%E9%A1%B5%E9%9D%A2%E4%BC%A0%E5%8F%82/11.png" alt></p>
<p>若在上面的<code>initStockDetails.js</code>文件中，使用freemarker的语法是不生效的。</p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/02/vue%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/07/02/vue%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD/" class="post-title-link" itemprop="url">vue插槽作用域</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-02 11:32:13" itemprop="dateCreated datePublished" datetime="2020-07-02T11:32:13+08:00">2020-07-02</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>4.4k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>4 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>定义：是vuejs中一个很有用的特性，可以显著的提高组件的通用性和可复用性。</p>
<h4 id="组件和插槽比较"><a href="#组件和插槽比较" class="headerlink" title="组件和插槽比较"></a>组件和插槽比较</h4><p>父组件通过<code>prop</code>向子组件传递数据，通过插槽向子组件传递内容。</p>
<p>共同点：都是从上(父)往下(子)传递数据</p>
<p>区别：Prop传递的是组件的属性，而插槽传递的是<code>VNode</code>节点。</p>
<p><strong>作用域插槽：是从下(子)往上(父)传递数据，官方描述<code>可从子组件获取数据</code></strong></p>
<h4 id="什么是插槽"><a href="#什么是插槽" class="headerlink" title="什么是插槽"></a>什么是插槽</h4><p>在组件中，使用<code>&lt;slot&gt;&lt;/slot&gt;</code>定义一个插槽，那么该组件在其他组件(父组件)中使用时，父组件的该组件 <strong>中间的内容</strong> 会被替换掉插槽所在位置。</p>
<h5 id="编译作用域"><a href="#编译作用域" class="headerlink" title="编译作用域"></a>编译作用域</h5><blockquote>
<p>父级模板中的所有内容都是在父级作用域中编译的；子模版里的所有内容都是在子作用域中编译的。</p>
</blockquote>
<h5 id="后备内容"><a href="#后备内容" class="headerlink" title="后备内容"></a>后备内容</h5><p>指给插槽设置具体的后备（默认的）内容是很有用的</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 定义一个含插槽的组件SubmitButton --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">slot</span>&gt;</span>submit<span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 父组件定义为这样(1) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">submit-button</span>&gt;</span><span class="tag">&lt;/<span class="name">submit-button</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 被渲染为（1） --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span>&gt;</span></span><br><span class="line">  Submit</span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 父组件定义为这样(2) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">submit-button</span>&gt;</span>Save<span class="tag">&lt;/<span class="name">submit-button</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 被渲染为（2） --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span>&gt;</span></span><br><span class="line">  Save	</span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="具名插槽"><a href="#具名插槽" class="headerlink" title="具名插槽"></a>具名插槽</h5><p>给<code>&lt;slot&gt;</code>指定一个特殊的属性： <code>name</code>;</p>
<p>其中不带name属性的<code>&lt;slot&gt;</code>会带一个隐式的名字<code>default</code>。</p>
<p>在向具名插槽提供内容的时候，我们可以在一个<code>&lt;template&gt;</code>元素上使用<code>v-slot</code>指令，并以<code>v-slot</code>的参数的形式提供其名称</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">base-layout</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:header</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Here might be a page title<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>A paragraph for the main content.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>And another one.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:footer</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>Here&#x27;s some contact info<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">base-layout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>现在<code>&lt;template&gt;</code>元素中的内容会被传入相应的插槽中。</p>
<p>任何没有被带有<code>v-slot</code>的<code>&lt;template&gt;</code>元素包裹的内容都会被视为默认插槽的内容。</p>
<p>当然，你也可以指定默认插槽的名称。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">base-layout</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:header</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Here might be a page title<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:default</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>A paragraph for the main content.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>And another one.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:footer</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>Here&#x27;s some contact info<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">base-layout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="作用域插槽"><a href="#作用域插槽" class="headerlink" title="作用域插槽"></a>作用域插槽</h5><p>有时让插槽内容能够访问子组件才有的数据是很有用的。</p>
<p>为了让子组件的某个数据如<code>user</code>在父级的插槽内容中可用，我们可以将<code>user</code>作为<code>&lt;slot&gt;</code>元素的一个attribute绑定上去：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">slot</span> <span class="attr">v-bind:user</span>=<span class="string">&quot;user&quot;</span>&gt;</span></span><br><span class="line">    &#123;&#123; user.lastName &#125;&#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>绑定在<code>&lt;slot&gt;</code>元素上的attribute被称为 <strong>插槽prop</strong>。</p>
<p>现在在父级作用域中，我们可以使用带值的<code>v-slot</code>来定义我们提供的<strong>插槽prop</strong>的名字：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">current-user</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:default</span>=<span class="string">&quot;slotProps&quot;</span>&gt;</span></span><br><span class="line">    &#123;&#123; slotProps.user.firstName &#125;&#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">current-user</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>在上述的例子中，将包含插槽prop的对象命名为<code>slotProps</code>,实际上，你可以使用任意你喜欢的名字。</p>
<h5 id="独占默认插槽的缩写写法"><a href="#独占默认插槽的缩写写法" class="headerlink" title="独占默认插槽的缩写写法"></a>独占默认插槽的缩写写法</h5><p>可以将v-slot直接使用在组件上</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">current-user</span> <span class="attr">v-slot:default</span>=<span class="string">&quot;slotProps&quot;</span>&gt;</span></span><br><span class="line">  &#123;&#123; slotProps.user.firstName &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">current-user</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>可以使用不带参数的v-slot来假定为默认插槽</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">current-user</span> <span class="attr">v-slot</span>=<span class="string">&quot;slotProps&quot;</span>&gt;</span></span><br><span class="line">  &#123;&#123; slotProps.user.firstName &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">current-user</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>注意: 默认插槽的缩写写法不能和具名插槽混用，因为他会导致作用域不明</strong></p>
<p><strong>因此，只要出现多个插槽，请始终为所有的插槽使用完整的基于<code>&lt;template&gt;</code>的语法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">current-user</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:default</span>=<span class="string">&quot;slotProps&quot;</span>&gt;</span></span><br><span class="line">    &#123;&#123; slotProps.user.firstName &#125;&#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:other</span>=<span class="string">&quot;otherSlotProps&quot;</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">current-user</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="解构插槽Prop"><a href="#解构插槽Prop" class="headerlink" title="解构插槽Prop"></a>解构插槽Prop</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">current-user</span> <span class="attr">v-slot</span>=<span class="string">&quot;&#123; user &#125;&quot;</span>&gt;</span></span><br><span class="line">  &#123;&#123; user.firstName &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">current-user</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>也可以将user重命名为person</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">current-user</span> <span class="attr">v-slot</span>=<span class="string">&quot;&#123; user: person &#125;&quot;</span>&gt;</span></span><br><span class="line">  &#123;&#123; person.firstName &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">current-user</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>甚至可以定义后备内容，用于插槽prop是<code>undefined</code>的情形</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">current-user</span> <span class="attr">v-slot</span>=<span class="string">&quot;&#123; user = &#123; firstName: &#x27;Guest&#x27; &#125; &#125;&quot;</span>&gt;</span></span><br><span class="line">  &#123;&#123; user.firstName &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">current-user</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="具名插槽的缩写"><a href="#具名插槽的缩写" class="headerlink" title="具名插槽的缩写"></a>具名插槽的缩写</h5><p>和<code>v-bind</code>、<code>v-on</code>一样，<code>v-slot</code>也有缩写。</p>
<p>可以把参数之前的内容(<code>v-slot:</code>)替换为字符<code>#</code>。</p>
<p>如<code>v-slot:header</code>可以被重写为<code>#header</code>。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">base-layout</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> #<span class="attr">header</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Here might be a page title<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>A paragraph for the main content.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>And another one.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> #<span class="attr">footer</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>Here&#x27;s some contact info<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">base-layout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>然而，和其他的指令一样，该缩写只有在其存在参数的时候才有效。</strong></p>
<p>所以下面的语法是无效的</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 这样会触发一个警告 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">current-user</span> #=<span class="string">&quot;&#123; user &#125;&quot;</span>&gt;</span></span><br><span class="line">  &#123;&#123; user.firstName &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">current-user</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>如果你希望使用缩写的话，那么你必须以明确的插槽名来取而代之</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">current-user</span> #<span class="attr">default</span>=<span class="string">&quot;&#123; user &#125;&quot;</span>&gt;</span></span><br><span class="line">  &#123;&#123; user.firstName &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">current-user</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="作用域插槽的一些理解"><a href="#作用域插槽的一些理解" class="headerlink" title="作用域插槽的一些理解"></a>作用域插槽的一些理解</h5><p>作用域插槽可以在父组件中访问子组件中的数据。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">// 子组件</span><br><span class="line">...</span><br><span class="line">child</span><br><span class="line">// 在子组件上，给 slot 绑定一个属性，我们叫做 ‘插槽prop’</span><br><span class="line">&lt;slot :user=&quot;&quot; &gt;&lt;/slot&gt;</span><br><span class="line">...</span><br><span class="line"></span><br><span class="line">// 父组件</span><br><span class="line">...</span><br><span class="line">// vue 2.6 之前</span><br><span class="line">&lt;child slot-scope=&quot;scope&quot;&gt;&#123;&#123;scope.user&#125;&#125;&lt;/child&gt;</span><br><span class="line">// vue 2.6 之后</span><br><span class="line">&lt;child v-slot:default=&quot;scope&quot;&gt;&#123;&#123;scope.user&#125;&#125;&lt;/child&gt;</span><br><span class="line">// 或者</span><br><span class="line">&lt;child v-slot=&quot;scope&quot;&gt;&#123;&#123;scope.user&#125;&#125;&lt;/child&gt;</span><br><span class="line">...</span><br></pre></td></tr></table></figure>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/02/vue%E6%8F%92%E6%A7%BD%E4%BD%9C%E7%94%A8%E5%9F%9F/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/07/02/vue%E6%8F%92%E6%A7%BD%E4%BD%9C%E7%94%A8%E5%9F%9F/" class="post-title-link" itemprop="url">vue插槽作用域</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-02 11:32:13" itemprop="dateCreated datePublished" datetime="2020-07-02T11:32:13+08:00">2020-07-02</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>38</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>定义：是vuejs中一个很有用的特性，可以显著的提高组件的通用性和可复用性。</p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/01/faq-oracle/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/07/01/faq-oracle/" class="post-title-link" itemprop="url">faq-oracle</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-01 15:11:18" itemprop="dateCreated datePublished" datetime="2020-07-01T15:11:18+08:00">2020-07-01</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/FAQ/" itemprop="url" rel="index"><span itemprop="name">FAQ</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>226</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h4 id="ORA-01861-文字与格式字符串不匹配"><a href="#ORA-01861-文字与格式字符串不匹配" class="headerlink" title="ORA-01861: 文字与格式字符串不匹配"></a>ORA-01861: 文字与格式字符串不匹配</h4><p>原因：数据库中字段定义的为date类型，而在java中定义的为string字符串类型</p>
<p>解决：将java中的字段类型改为<code>java.util.Date</code>类型</p>
<h4 id="将多行数据的同一个字段合并到一列"><a href="#将多行数据的同一个字段合并到一列" class="headerlink" title="将多行数据的同一个字段合并到一列"></a>将多行数据的同一个字段合并到一列</h4><h5 id="listagg"><a href="#listagg" class="headerlink" title="listagg()"></a>listagg()</h5><p>例子：</p>
<p><img src="http://localhost:4000/2020/07/01/faq-oracle/22.png" alt></p>
<p><img src="http://localhost:4000/2020/07/01/faq-oracle/33.png" alt></p>
<p>注意点：</p>
<p><img src="http://localhost:4000/2020/07/01/faq-oracle/11.png" alt></p>
<h5 id="wm-concat"><a href="#wm-concat" class="headerlink" title="wm_concat()"></a>wm_concat()</h5><p>wm_concat()默认以逗号<code>,</code>来分割字段；</p>
<h4 id="oracle-判断除数不为-0-的方法"><a href="#oracle-判断除数不为-0-的方法" class="headerlink" title="oracle 判断除数不为 0 的方法"></a>oracle 判断除数不为 0 的方法</h4><p><code>decode(column_name, 0, 0, column_name_1 / column_name)</code></p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/01/faq-java/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/07/01/faq-java/" class="post-title-link" itemprop="url">faq-java</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-01 15:04:20" itemprop="dateCreated datePublished" datetime="2020-07-01T15:04:20+08:00">2020-07-01</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/FAQ/" itemprop="url" rel="index"><span itemprop="name">FAQ</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>3.8k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>3 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h4 id="jdk1-8如何解析和格式化日期"><a href="#jdk1-8如何解析和格式化日期" class="headerlink" title="jdk1.8如何解析和格式化日期"></a>jdk1.8如何解析和格式化日期</h4><h5 id="解析日期和时间"><a href="#解析日期和时间" class="headerlink" title="解析日期和时间"></a>解析日期和时间</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">String</span> <span class="variable">str</span> <span class="operator">=</span> <span class="string">&quot;1986-04-08 12:30&quot;</span>;</span><br><span class="line"><span class="type">DateTimeFormatter</span> <span class="variable">formatter</span> <span class="operator">=</span> DateTimeFormatter.ofPattern(<span class="string">&quot;yyyy-MM-dd HH:mm&quot;</span>);</span><br><span class="line"><span class="type">LocalDateTime</span> <span class="variable">dateTime</span> <span class="operator">=</span> LocalDateTime.parse(str, formatter);</span><br></pre></td></tr></table></figure>
<h5 id="格式化日期和时间"><a href="#格式化日期和时间" class="headerlink" title="格式化日期和时间"></a>格式化日期和时间</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">DateTimeFormatter</span> <span class="variable">formatter</span> <span class="operator">=</span> DateTimeFormatter.ofPattern(<span class="string">&quot;yyyy-MM-dd HH:mm&quot;</span>);</span><br><span class="line"><span class="type">LocalDateTime</span> <span class="variable">dateTime</span> <span class="operator">=</span> LocalDateTime.of(<span class="number">1986</span>, Month.APRIL, <span class="number">8</span>, <span class="number">12</span>, <span class="number">30</span>);</span><br><span class="line"><span class="type">String</span> <span class="variable">formattedDateTime</span> <span class="operator">=</span> dateTime.format(formatter); <span class="comment">// &quot;1986-04-08 12:30&quot;</span></span><br></pre></td></tr></table></figure>
<h4 id="Java8中Date与LocalDateTime、LocalDate、LocalTime之间的互转"><a href="#Java8中Date与LocalDateTime、LocalDate、LocalTime之间的互转" class="headerlink" title="Java8中Date与LocalDateTime、LocalDate、LocalTime之间的互转"></a>Java8中Date与LocalDateTime、LocalDate、LocalTime之间的互转</h4><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 01. java.util.Date --&gt; java.time.LocalDateTime</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">UDateToLocalDateTime</span><span class="params">()</span> &#123;</span><br><span class="line">    java.util.<span class="type">Date</span> <span class="variable">date</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">java</span>.util.Date();</span><br><span class="line">    <span class="type">Instant</span> <span class="variable">instant</span> <span class="operator">=</span> date.toInstant();</span><br><span class="line">    <span class="type">ZoneId</span> <span class="variable">zone</span> <span class="operator">=</span> ZoneId.systemDefault();</span><br><span class="line">    <span class="type">LocalDateTime</span> <span class="variable">localDateTime</span> <span class="operator">=</span> LocalDateTime.ofInstant(instant, zone);</span><br><span class="line">&#125;</span><br><span class="line">	</span><br><span class="line"><span class="comment">// 02. java.util.Date --&gt; java.time.LocalDate</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">UDateToLocalDate</span><span class="params">()</span> &#123;</span><br><span class="line">    java.util.<span class="type">Date</span> <span class="variable">date</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">java</span>.util.Date();</span><br><span class="line">    <span class="type">Instant</span> <span class="variable">instant</span> <span class="operator">=</span> date.toInstant();</span><br><span class="line">    <span class="type">ZoneId</span> <span class="variable">zone</span> <span class="operator">=</span> ZoneId.systemDefault();</span><br><span class="line">    <span class="type">LocalDateTime</span> <span class="variable">localDateTime</span> <span class="operator">=</span> LocalDateTime.ofInstant(instant, zone);</span><br><span class="line">    <span class="type">LocalDate</span> <span class="variable">localDate</span> <span class="operator">=</span> localDateTime.toLocalDate();</span><br><span class="line">&#125;</span><br><span class="line">	</span><br><span class="line"><span class="comment">// 03. java.util.Date --&gt; java.time.LocalTime</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">UDateToLocalTime</span><span class="params">()</span> &#123;</span><br><span class="line">    java.util.<span class="type">Date</span> <span class="variable">date</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">java</span>.util.Date();</span><br><span class="line">    <span class="type">Instant</span> <span class="variable">instant</span> <span class="operator">=</span> date.toInstant();</span><br><span class="line">    <span class="type">ZoneId</span> <span class="variable">zone</span> <span class="operator">=</span> ZoneId.systemDefault();</span><br><span class="line">    <span class="type">LocalDateTime</span> <span class="variable">localDateTime</span> <span class="operator">=</span> LocalDateTime.ofInstant(instant, zone);</span><br><span class="line">    <span class="type">LocalTime</span> <span class="variable">localTime</span> <span class="operator">=</span> localDateTime.toLocalTime();</span><br><span class="line">&#125;</span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line"><span class="comment">// 04. java.time.LocalDateTime --&gt; java.util.Date</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">LocalDateTimeToUdate</span><span class="params">()</span> &#123;</span><br><span class="line">    <span class="type">LocalDateTime</span> <span class="variable">localDateTime</span> <span class="operator">=</span> LocalDateTime.now();</span><br><span class="line">    <span class="type">ZoneId</span> <span class="variable">zone</span> <span class="operator">=</span> ZoneId.systemDefault();</span><br><span class="line">    <span class="type">Instant</span> <span class="variable">instant</span> <span class="operator">=</span> localDateTime.atZone(zone).toInstant();</span><br><span class="line">    java.util.<span class="type">Date</span> <span class="variable">date</span> <span class="operator">=</span> Date.from(instant);</span><br><span class="line">&#125;</span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line"><span class="comment">// 05. java.time.LocalDate --&gt; java.util.Date</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">LocalDateToUdate</span><span class="params">()</span> &#123;</span><br><span class="line">    <span class="type">LocalDate</span> <span class="variable">localDate</span> <span class="operator">=</span> LocalDate.now();</span><br><span class="line">    <span class="type">ZoneId</span> <span class="variable">zone</span> <span class="operator">=</span> ZoneId.systemDefault();</span><br><span class="line">    <span class="type">Instant</span> <span class="variable">instant</span> <span class="operator">=</span> localDate.atStartOfDay().atZone(zone).toInstant();</span><br><span class="line">    java.util.<span class="type">Date</span> <span class="variable">date</span> <span class="operator">=</span> Date.from(instant);</span><br><span class="line">&#125;</span><br><span class="line">	</span><br><span class="line"><span class="comment">// 06. java.time.LocalTime --&gt; java.util.Date</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">LocalTimeToUdate</span><span class="params">()</span> &#123;</span><br><span class="line">    <span class="type">LocalTime</span> <span class="variable">localTime</span> <span class="operator">=</span> LocalTime.now();</span><br><span class="line">    <span class="type">LocalDate</span> <span class="variable">localDate</span> <span class="operator">=</span> LocalDate.now();</span><br><span class="line">    <span class="type">LocalDateTime</span> <span class="variable">localDateTime</span> <span class="operator">=</span> LocalDateTime.of(localDate, localTime);</span><br><span class="line">    <span class="type">ZoneId</span> <span class="variable">zone</span> <span class="operator">=</span> ZoneId.systemDefault();</span><br><span class="line">    <span class="type">Instant</span> <span class="variable">instant</span> <span class="operator">=</span> localDateTime.atZone(zone).toInstant();</span><br><span class="line">    java.util.<span class="type">Date</span> <span class="variable">date</span> <span class="operator">=</span> Date.from(instant);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="http错误代码"><a href="#http错误代码" class="headerlink" title="http错误代码"></a>http错误代码</h4><ol>
<li><h5 id="400"><a href="#400" class="headerlink" title="400"></a>400</h5><p>请求无效（bad request），出现这个请求报错说明请求没有进入到后台服务中</p>
<p>原因：</p>
<ul>
<li>前端提交数据的字段名称或者字段类型和后台的实体类不一致，导致无法封装。</li>
<li>前端提交到后台的数据应该是json字符串类型，而前端没有将对象转化为字符串类型。</li>
</ul>
<p>解决方案：</p>
<ul>
<li>对照字段名称、类型，保证一致性</li>
<li>使用<code>JSON.stringify(param)</code>将前端传递的对象转化为字符串。</li>
</ul>
</li>
</ol>
<h4 id="EasyPOI导出excel文件时，若不想导出表头，怎么设置？"><a href="#EasyPOI导出excel文件时，若不想导出表头，怎么设置？" class="headerlink" title="EasyPOI导出excel文件时，若不想导出表头，怎么设置？"></a>EasyPOI导出excel文件时，若不想导出表头，怎么设置？</h4><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">ExportParams</span> <span class="variable">exportParams</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">ExportParams</span>(<span class="string">&quot;支付宝账单&quot;</span>, <span class="string">&quot;支付宝账单&quot;</span>);</span><br><span class="line">List&lt;KnsAliBillVo&gt; list = <span class="keyword">new</span> <span class="title class_">ArrayList</span>&lt;&gt;();</span><br><span class="line">workbook = ExcelExportUtil.exportExcel(exportParams, KnsAliBillVo.class, list);</span><br><span class="line"><span class="comment">// 如果不想导出表头那一行，可以设置表头字符串参数为null即可。</span></span><br><span class="line"><span class="type">ExportParams</span> <span class="variable">exportParams</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">ExportParams</span>(<span class="literal">null</span> , <span class="string">&quot;支付宝账单&quot;</span>);</span><br></pre></td></tr></table></figure>
<h4 id="java在同一行代码定义多个变量"><a href="#java在同一行代码定义多个变量" class="headerlink" title="java在同一行代码定义多个变量"></a>java在同一行代码定义多个变量</h4><p>一个栗子：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 同一行定义多个同类型的变量</span></span><br><span class="line"><span class="type">String</span> <span class="variable">a</span> <span class="operator">=</span> <span class="string">&quot;Hello&quot;</span>, c = <span class="string">&quot;hello&quot;</span>;</span><br><span class="line"><span class="type">int</span> <span class="variable">x</span> <span class="operator">=</span> <span class="number">5</span>, y = <span class="number">5</span>;</span><br></pre></td></tr></table></figure>
<h4 id="i-和-i-的区别"><a href="#i-和-i-的区别" class="headerlink" title="++i 和 i++ 的区别"></a>++i 和 i++ 的区别</h4><p>i++ 和 ++i 都是自增运算符，<code>i++</code> 有时被称作 <strong>后加运算符</strong> ，<code>++i</code> 被称作 <strong>前加运算符 。</strong></p>
<ul>
<li><code>i++</code> 是先赋值，再运算(自增长 1)</li>
<li><code>++i</code> 是先运算(自增长 1)，再赋值</li>
</ul>
<h5 id="讨论-i-与-i-的效率"><a href="#讨论-i-与-i-的效率" class="headerlink" title="讨论 i++ 与 ++i 的效率"></a>讨论 i++ 与 ++i 的效率</h5><blockquote>
<p>理论上，经过编译器优化后 i++ 与 ++i 的效率几乎一样，实际测试，++i 效率高于 i++。</p>
</blockquote>
<h4 id="spring中的注解-Component-Repository-Service-Controller-等标注的默认-Bean-名称"><a href="#spring中的注解-Component-Repository-Service-Controller-等标注的默认-Bean-名称" class="headerlink" title="spring中的注解 @Component, @Repository, @Service, @Controller 等标注的默认 Bean 名称"></a>spring中的注解 <code>@Component, @Repository, @Service, @Controller</code> 等标注的默认 Bean 名称</h4><p><strong>都是小写开头的类名</strong></p>
<h4 id="报错信息java-lang-NoSuchMethodError-org-json-JSONObject-put-String-Collection"><a href="#报错信息java-lang-NoSuchMethodError-org-json-JSONObject-put-String-Collection" class="headerlink" title="报错信息java.lang.NoSuchMethodError:org.json.JSONObject.put(String, Collection)"></a>报错信息<code>java.lang.NoSuchMethodError:org.json.JSONObject.put(String, Collection)</code></h4><p>经检查，引入的包中是存在这个方法的，但是依然报错，</p>
<p>可能原因：包依赖冲突的问题，需要检查<code>org.json</code>包是否引入了多次。</p>
<h4 id="springboot项目-Value取不到值的一些情况"><a href="#springboot项目-Value取不到值的一些情况" class="headerlink" title="springboot项目@Value取不到值的一些情况"></a>springboot项目<code>@Value</code>取不到值的一些情况</h4><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@Value(&quot;$&#123;tag&#125;&quot;)</span></span><br><span class="line"><span class="keyword">private</span> String tagValue;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>使用 <code>static</code> 或者 <code>final</code> 修改了 <code>tagValue</code></p>
</li>
<li><p>类上没有加上<code>@Component</code> 或者 <code>@Service</code>注解等</p>
</li>
<li><p>类被 <code>new</code> 新建了实例，而没有使用 <code>@Autowired</code>注解</p>
<p>  若不想使用 <code>@Autowired</code>自动装配，可以使用 <code>ApplicationContext</code>类来获取”bean”</p>
</li>
</ul>
<h4 id="stream中方法peek和map方法之间的区别"><a href="#stream中方法peek和map方法之间的区别" class="headerlink" title="stream中方法peek和map方法之间的区别"></a>stream中方法<code>peek</code>和<code>map</code>方法之间的区别</h4><ul>
<li>peek 可对元素的内部数据进行处理，返回的是原来的数据类型，不生成新的数据类型。</li>
<li>map 重新返回一个新的数据类型。</li>
</ul>
<h4 id="Math-floor-Math-ceil-Math-rint-Math-round用法详解"><a href="#Math-floor-Math-ceil-Math-rint-Math-round用法详解" class="headerlink" title="Math.floor, Math.ceil, Math.rint, Math.round用法详解"></a>Math.floor, Math.ceil, Math.rint, Math.round用法详解</h4><h5 id="Math-floor"><a href="#Math-floor" class="headerlink" title="Math.floor"></a>Math.floor</h5><p>求一个最接近它的整数，它的值小于或等于这个浮点数。</p>
<h5 id="Math-ceil"><a href="#Math-ceil" class="headerlink" title="Math.ceil"></a>Math.ceil</h5><p>它是向上取整计算，它返回的是大于或等于函数参数的值，并且与之最接近的整数。</p>
<h5 id="Math-rint"><a href="#Math-rint" class="headerlink" title="Math.rint"></a>Math.rint</h5><p>它返回最接近参数的整数，如果有两个数同样相近，则返回偶数的那个。</p>
<h5 id="Math-round"><a href="#Math-round" class="headerlink" title="Math.round"></a>Math.round</h5><p>它表示“四舍五入”，算法为<code>Math.floor(x + 0.5)</code>，即将原来的数字加上<code>0.5</code>再向下取整。</p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/" class="post-title-link" itemprop="url">element-ui常用组件详解</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-01 10:06:14" itemprop="dateCreated datePublished" datetime="2020-07-01T10:06:14+08:00">2020-07-01</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>16k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>15 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h4 id="文件上传-uplaod"><a href="#文件上传-uplaod" class="headerlink" title="文件上传 uplaod"></a>文件上传 uplaod</h4><h5 id="Attribute"><a href="#Attribute" class="headerlink" title="Attribute"></a>Attribute</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:center">说明</th>
<th>类型</th>
<th style="text-align:center">可选值</th>
<th style="text-align:center">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">action</td>
<td style="text-align:center">必选参数，上传的地址</td>
<td>string</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">headers</td>
<td style="text-align:center">设置上传的请求头部</td>
<td>object</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">multiple</td>
<td style="text-align:center">是否支持多选文件</td>
<td>Boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">data</td>
<td style="text-align:center">上传时附带的额外参数</td>
<td>object</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">name</td>
<td style="text-align:center">上传的文件字段名</td>
<td>string</td>
<td style="text-align:center">-</td>
<td style="text-align:center">file</td>
</tr>
<tr>
<td style="text-align:left">with-credentials</td>
<td style="text-align:center">支持发送cookie凭证信息</td>
<td>boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">false</td>
</tr>
<tr>
<td style="text-align:left">show-file-list</td>
<td style="text-align:center">是否显示已上传文件列表</td>
<td>boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">true</td>
</tr>
<tr>
<td style="text-align:left">drag</td>
<td style="text-align:center">是否启用拖拽上传</td>
<td>boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">false</td>
</tr>
<tr>
<td style="text-align:left">accept</td>
<td style="text-align:center">接受上传的文件类型（thumbnail-mode模式下此参数无效）</td>
<td>string</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-preview</td>
<td style="text-align:center">点击文件列表中已上传文件时的钩子</td>
<td>function(file)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-remove</td>
<td style="text-align:center">文件列表移除文件时的钩子</td>
<td>function(file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-success</td>
<td style="text-align:center">文件上传成功时的钩子</td>
<td>function(response, file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-error</td>
<td style="text-align:center">文件上传失败时的钩子</td>
<td>function(err, file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-progress</td>
<td style="text-align:center">文件上传时的钩子</td>
<td>function(event, file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">before-upload</td>
<td style="text-align:center">文件上传之前的钩子，参数为上传的文件，若返回false或者返回Promise且被reject，则停止上传</td>
<td>function(file)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">before-remove</td>
<td style="text-align:center">文件删除之前的钩子，参数为上传的文件和文件列表，若返回false或者返回Promise且被reject，则停止删除</td>
<td>function(file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">list-type</td>
<td style="text-align:center">文件列表的类型</td>
<td>string</td>
<td style="text-align:center">text/picture/picture-card</td>
<td style="text-align:center">text</td>
</tr>
<tr>
<td style="text-align:left">auto-upload</td>
<td style="text-align:center">是否在选取文件之后立即进行上传</td>
<td>boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">true</td>
</tr>
<tr>
<td style="text-align:left">file-list</td>
<td style="text-align:center">上传的文件列表</td>
<td>array</td>
<td style="text-align:center">-</td>
<td style="text-align:center">[]</td>
</tr>
<tr>
<td style="text-align:left">http-request</td>
<td style="text-align:center">覆盖默认的上传行为，可以自定义上传的实现</td>
<td>function</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">disabled</td>
<td style="text-align:center">是否禁用</td>
<td>boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">false</td>
</tr>
<tr>
<td style="text-align:left">limit</td>
<td style="text-align:center">最大允许上传的个数</td>
<td>number</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-exceed</td>
<td style="text-align:center">文件超出个数限制时的钩子</td>
<td>function(file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Slot"><a href="#Slot" class="headerlink" title="Slot"></a>Slot</h5><div class="table-container">
<table>
<thead>
<tr>
<th>name</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>trigger</td>
<td>触发文件选择框的内容</td>
</tr>
<tr>
<td>tip</td>
<td>提示说明文字</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Methods"><a href="#Methods" class="headerlink" title="Methods"></a>Methods</h5><div class="table-container">
<table>
<thead>
<tr>
<th>方法名</th>
<th>说明</th>
<th>参数</th>
</tr>
</thead>
<tbody>
<tr>
<td>clearFiles</td>
<td>清空已上传的文件列表(该方法不支持在before-uplaod中调用)</td>
<td>-</td>
</tr>
<tr>
<td>abort</td>
<td>取消上传请求</td>
<td>（file: fileList中的file对象）</td>
</tr>
<tr>
<td>submit</td>
<td>手动上传文件列表</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h4 id="Message-消息提示"><a href="#Message-消息提示" class="headerlink" title="Message 消息提示"></a>Message 消息提示</h4><p>常用于主动操作后的反馈提示。与Notification的区别是后者更多用于系统级通知的被动提醒。</p>
<h5 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h5><p>从顶部出现，3秒后自动消失</p>
<p><code>this.$message(&#39;这是一个消息提示&#39;)</code></p>
<hr>
<h4 id="分割线"><a href="#分割线" class="headerlink" title="分割线"></a>分割线</h4><h5 id="基础用法"><a href="#基础用法" class="headerlink" title="基础用法"></a>基础用法</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-divider</span>&gt;</span><span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="设置文案"><a href="#设置文案" class="headerlink" title="设置文案"></a>设置文案</h5><p>可以在分割线上自定义文案内容。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>头上一片晴天，心中一个想念<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-divider</span> <span class="attr">content-position</span>=<span class="string">&quot;left&quot;</span>&gt;</span>少年包青天<span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>饿了别叫妈, 叫饿了么<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-divider</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;el-icon-mobile-phone&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>为了无法计算的价值<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-divider</span> <span class="attr">content-position</span>=<span class="string">&quot;right&quot;</span>&gt;</span>阿里云<span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="垂直分割"><a href="#垂直分割" class="headerlink" title="垂直分割"></a>垂直分割</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>雨纷纷<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-divider</span> <span class="attr">direction</span>=<span class="string">&quot;vertical&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>旧故里<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-divider</span> <span class="attr">direction</span>=<span class="string">&quot;vertical&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>草木深<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="divider-attributes"><a href="#divider-attributes" class="headerlink" title="divider attributes"></a>divider attributes</h4><div class="table-container">
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>direction</td>
<td>设置分割线方向</td>
<td>string</td>
<td>horizontal、vertical</td>
<td>horizontal</td>
</tr>
<tr>
<td>content-position</td>
<td>设置分割线文案的位置</td>
<td>string</td>
<td>left/right/center</td>
<td>center</td>
</tr>
</tbody>
</table>
</div>
<hr>
<h4 id="Form表单"><a href="#Form表单" class="headerlink" title="Form表单"></a>Form表单</h4><h5 id="典型表单"><a href="#典型表单" class="headerlink" title="典型表单"></a>典型表单</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-form ref=&quot;form&quot; :model=&quot;form&quot; label-width=&quot;80px&quot;&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;活动名称&quot;&gt;</span><br><span class="line">    &lt;el-input v-model=&quot;form.name&quot;&gt;&lt;/el-input&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;活动区域&quot;&gt;</span><br><span class="line">    &lt;el-select v-model=&quot;form.region&quot; placeholder=&quot;请选择活动区域&quot;&gt;</span><br><span class="line">      &lt;el-option label=&quot;区域一&quot; value=&quot;shanghai&quot;&gt;&lt;/el-option&gt;</span><br><span class="line">      &lt;el-option label=&quot;区域二&quot; value=&quot;beijing&quot;&gt;&lt;/el-option&gt;</span><br><span class="line">    &lt;/el-select&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;活动时间&quot;&gt;</span><br><span class="line">    &lt;el-col :span=&quot;11&quot;&gt;</span><br><span class="line">      &lt;el-date-picker type=&quot;date&quot; placeholder=&quot;选择日期&quot; v-model=&quot;form.date1&quot; style=&quot;width: 100%;&quot;&gt;&lt;/el-date-picker&gt;</span><br><span class="line">    &lt;/el-col&gt;</span><br><span class="line">    &lt;el-col class=&quot;line&quot; :span=&quot;2&quot;&gt;-&lt;/el-col&gt;</span><br><span class="line">    &lt;el-col :span=&quot;11&quot;&gt;</span><br><span class="line">      &lt;el-time-picker placeholder=&quot;选择时间&quot; v-model=&quot;form.date2&quot; style=&quot;width: 100%;&quot;&gt;&lt;/el-time-picker&gt;</span><br><span class="line">    &lt;/el-col&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;即时配送&quot;&gt;</span><br><span class="line">    &lt;el-switch v-model=&quot;form.delivery&quot;&gt;&lt;/el-switch&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;活动性质&quot;&gt;</span><br><span class="line">    &lt;el-checkbox-group v-model=&quot;form.type&quot;&gt;</span><br><span class="line">      &lt;el-checkbox label=&quot;美食/餐厅线上活动&quot; name=&quot;type&quot;&gt;&lt;/el-checkbox&gt;</span><br><span class="line">      &lt;el-checkbox label=&quot;地推活动&quot; name=&quot;type&quot;&gt;&lt;/el-checkbox&gt;</span><br><span class="line">      &lt;el-checkbox label=&quot;线下主题活动&quot; name=&quot;type&quot;&gt;&lt;/el-checkbox&gt;</span><br><span class="line">      &lt;el-checkbox label=&quot;单纯品牌曝光&quot; name=&quot;type&quot;&gt;&lt;/el-checkbox&gt;</span><br><span class="line">    &lt;/el-checkbox-group&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;特殊资源&quot;&gt;</span><br><span class="line">    &lt;el-radio-group v-model=&quot;form.resource&quot;&gt;</span><br><span class="line">      &lt;el-radio label=&quot;线上品牌商赞助&quot;&gt;&lt;/el-radio&gt;</span><br><span class="line">      &lt;el-radio label=&quot;线下场地免费&quot;&gt;&lt;/el-radio&gt;</span><br><span class="line">    &lt;/el-radio-group&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;活动形式&quot;&gt;</span><br><span class="line">    &lt;el-input type=&quot;textarea&quot; v-model=&quot;form.desc&quot;&gt;&lt;/el-input&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item&gt;</span><br><span class="line">    &lt;el-button type=&quot;primary&quot; @click=&quot;onSubmit&quot;&gt;立即创建&lt;/el-button&gt;</span><br><span class="line">    &lt;el-button&gt;取消&lt;/el-button&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">&lt;/el-form&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        form: &#123;</span><br><span class="line">          name: &#x27;&#x27;,</span><br><span class="line">          region: &#x27;&#x27;,</span><br><span class="line">          date1: &#x27;&#x27;,</span><br><span class="line">          date2: &#x27;&#x27;,</span><br><span class="line">          delivery: false,</span><br><span class="line">          type: [],</span><br><span class="line">          resource: &#x27;&#x27;,</span><br><span class="line">          desc: &#x27;&#x27;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      onSubmit() &#123;</span><br><span class="line">        console.log(&#x27;submit!&#x27;);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h4 id="DatePicker-时间选择器"><a href="#DatePicker-时间选择器" class="headerlink" title="DatePicker 时间选择器"></a>DatePicker 时间选择器</h4><p>用于选择或输入日期</p>
<h5 id="日期格式"><a href="#日期格式" class="headerlink" title="日期格式"></a>日期格式</h5><p>使用<code>format</code>属性指定输入框的格式；使用<code>value-format</code>指定绑定值的格式。</p>
<p><strong>请区分大小写</strong></p>
<div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">格式</th>
<th style="text-align:left">含义</th>
<th style="text-align:left">备注</th>
<th style="text-align:left">举例</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>yyyy</code></td>
<td style="text-align:left">年</td>
<td style="text-align:left"></td>
<td style="text-align:left">2017</td>
</tr>
<tr>
<td style="text-align:left"><code>M</code></td>
<td style="text-align:left">月</td>
<td style="text-align:left">不补0</td>
<td style="text-align:left">1</td>
</tr>
<tr>
<td style="text-align:left"><code>MM</code></td>
<td style="text-align:left">月</td>
<td style="text-align:left"></td>
<td style="text-align:left">01</td>
</tr>
<tr>
<td style="text-align:left"><code>W</code></td>
<td style="text-align:left">周</td>
<td style="text-align:left">仅周选择器的 <code>format</code> 可用；不补0</td>
<td style="text-align:left">1</td>
</tr>
<tr>
<td style="text-align:left"><code>WW</code></td>
<td style="text-align:left">周</td>
<td style="text-align:left">仅周选择器的 <code>format</code> 可用</td>
<td style="text-align:left">01</td>
</tr>
<tr>
<td style="text-align:left"><code>d</code></td>
<td style="text-align:left">日</td>
<td style="text-align:left">不补0</td>
<td style="text-align:left">2</td>
</tr>
<tr>
<td style="text-align:left"><code>dd</code></td>
<td style="text-align:left">日</td>
<td style="text-align:left"></td>
<td style="text-align:left">02</td>
</tr>
<tr>
<td style="text-align:left"><code>H</code></td>
<td style="text-align:left">小时</td>
<td style="text-align:left">24小时制；不补0</td>
<td style="text-align:left">3</td>
</tr>
<tr>
<td style="text-align:left"><code>HH</code></td>
<td style="text-align:left">小时</td>
<td style="text-align:left">24小时制</td>
<td style="text-align:left">03</td>
</tr>
<tr>
<td style="text-align:left"><code>h</code></td>
<td style="text-align:left">小时</td>
<td style="text-align:left">12小时制，须和 <code>A</code> 或 <code>a</code> 使用；不补0</td>
<td style="text-align:left">3</td>
</tr>
<tr>
<td style="text-align:left"><code>hh</code></td>
<td style="text-align:left">小时</td>
<td style="text-align:left">12小时制，须和 <code>A</code> 或 <code>a</code> 使用</td>
<td style="text-align:left">03</td>
</tr>
<tr>
<td style="text-align:left"><code>m</code></td>
<td style="text-align:left">分钟</td>
<td style="text-align:left">不补0</td>
<td style="text-align:left">4</td>
</tr>
<tr>
<td style="text-align:left"><code>mm</code></td>
<td style="text-align:left">分钟</td>
<td style="text-align:left"></td>
<td style="text-align:left">04</td>
</tr>
<tr>
<td style="text-align:left"><code>s</code></td>
<td style="text-align:left">秒</td>
<td style="text-align:left">不补0</td>
<td style="text-align:left">5</td>
</tr>
<tr>
<td style="text-align:left"><code>ss</code></td>
<td style="text-align:left">秒</td>
<td style="text-align:left"></td>
<td style="text-align:left">05</td>
</tr>
<tr>
<td style="text-align:left"><code>A</code></td>
<td style="text-align:left">AM/PM</td>
<td style="text-align:left">仅 <code>format</code> 可用，大写</td>
<td style="text-align:left">AM</td>
</tr>
<tr>
<td style="text-align:left"><code>a</code></td>
<td style="text-align:left">am/pm</td>
<td style="text-align:left">仅 <code>format</code> 可用，小写</td>
<td style="text-align:left">am</td>
</tr>
<tr>
<td style="text-align:left"><code>timestamp</code></td>
<td style="text-align:left">JS时间戳</td>
<td style="text-align:left">仅 <code>value-format</code> 可用；组件绑定值为<code>number</code>类型</td>
<td style="text-align:left">1483326245000</td>
</tr>
<tr>
<td style="text-align:left"><code>[MM]</code></td>
<td style="text-align:left">不需要格式化字符</td>
<td style="text-align:left">使用方括号标识不需要格式化的字符 (如 [A] [MM])</td>
<td style="text-align:left">MM</td>
</tr>
</tbody>
</table>
</div>
<h4 id="Loading加载"><a href="#Loading加载" class="headerlink" title="Loading加载"></a>Loading加载</h4><p>加载数据时显示功效</p>
<h5 id="加载方式"><a href="#加载方式" class="headerlink" title="加载方式"></a>加载方式</h5><ul>
<li><p>指令加载</p>
<p><img src="http://localhost:4000/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/11.png" alt></p>
</li>
<li><p>服务加载</p>
<p><img src="http://localhost:4000/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/22.png" alt></p>
</li>
</ul>
<h4 id="Switch-开关"><a href="#Switch-开关" class="headerlink" title="Switch 开关"></a>Switch 开关</h4><h5 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h5><p>绑定 <code>v-model</code> 到一个 <code>Boolean</code> 类型的变量。可以使用 <code>active-color</code> 属性与 <code>inactive-color</code> 属性来设置开关的背景颜色。</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-switch</span><br><span class="line">  v-model=&quot;value2&quot;</span><br><span class="line">  active-color=&quot;#13ce66&quot;</span><br><span class="line">  inactive-color=&quot;#ff4949&quot;         </span><br><span class="line">  &gt;</span><br><span class="line">&lt;/el-switch&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">      data () &#123;</span><br><span class="line">          return &#123;</span><br><span class="line">              value1: true,</span><br><span class="line">              value2: true</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="文字描述"><a href="#文字描述" class="headerlink" title="文字描述"></a>文字描述</h5><p>使用 <code>active-text</code> 属性与 <code>inactive-text</code> 属性来设置开关的文字描述。</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-switch</span><br><span class="line">  v-model=&quot;value3&quot;</span><br><span class="line">  active-text=&quot;按月付费&quot;</span><br><span class="line">  inactive-text=&quot;按年付费&quot;&gt;</span><br><span class="line">&lt;/el-switch&gt;</span><br><span class="line">&lt;el-switch</span><br><span class="line">  style=&quot;display: block&quot;</span><br><span class="line">  v-model=&quot;value4&quot;</span><br><span class="line">  active-color=&quot;#13ce66&quot;</span><br><span class="line">  inactive-color=&quot;#ff4949&quot;</span><br><span class="line">  active-text=&quot;按月付费&quot;</span><br><span class="line">  inactive-text=&quot;按年付费&quot;&gt;</span><br><span class="line">&lt;/el-switch&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        value3: true,</span><br><span class="line">        value4: true</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="扩展的-value-类型"><a href="#扩展的-value-类型" class="headerlink" title="扩展的 value 类型"></a>扩展的 value 类型</h5><p>设置 <code>active-value</code> 与 <code>inactive-value</code> 属性，接受 <code>Boolean</code>, <code>String</code> 或 <code>Number</code> 类型的值。</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-tooltip :content=&quot;&#x27;Switch value: &#x27; + value5&quot; placement=&quot;top&quot;&gt;</span><br><span class="line">  &lt;el-switch</span><br><span class="line">    v-model=&quot;value5&quot;</span><br><span class="line">    active-color=&quot;#13ce66&quot;</span><br><span class="line">    inactive-color=&quot;#ff4949&quot;</span><br><span class="line">    active-value=&quot;100&quot;</span><br><span class="line">    inactive-value=&quot;0&quot;&gt;</span><br><span class="line">  &lt;/el-switch&gt;</span><br><span class="line">&lt;/el-tooltip&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        value5: &#x27;100&#x27;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="禁用状态"><a href="#禁用状态" class="headerlink" title="禁用状态"></a>禁用状态</h5><p>设置 <code>disabled</code> 属性，接受一个 <code>Boolean</code> ,设置 <code>true</code> 即可禁用。</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-switch</span><br><span class="line">  v-model=&quot;value6&quot;</span><br><span class="line">  disabled&gt;</span><br><span class="line">&lt;/el-switch&gt;</span><br><span class="line">&lt;el-switch</span><br><span class="line">  v-model=&quot;value7&quot;</span><br><span class="line">  disabled&gt;</span><br><span class="line">&lt;/el-switch&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        value6: true,</span><br><span class="line">        value7: false</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="Attributes"><a href="#Attributes" class="headerlink" title="Attributes"></a>Attributes</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">可选值</th>
<th style="text-align:left">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">disabled</td>
<td style="text-align:left">是否禁用</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">width</td>
<td style="text-align:left">switch 的宽度（像素）</td>
<td style="text-align:left">number</td>
<td style="text-align:left">—</td>
<td style="text-align:left">40</td>
</tr>
<tr>
<td style="text-align:left">active-icon-class</td>
<td style="text-align:left">switch 打开时所显示图标的类名，设置此项会忽略 <code>active-text</code></td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">inactive-icon-class</td>
<td style="text-align:left">switch 关闭时所显示图标的类名，设置此项会忽略 <code>inactive-text</code></td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">active-text</td>
<td style="text-align:left">switch 打开时的文字描述</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">inactive-text</td>
<td style="text-align:left">switch 关闭时的文字描述</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">active-value</td>
<td style="text-align:left">switch 打开时的值</td>
<td style="text-align:left">boolean / string / number</td>
<td style="text-align:left">—</td>
<td style="text-align:left">true</td>
</tr>
<tr>
<td style="text-align:left">inactive-value</td>
<td style="text-align:left">switch 关闭时的值</td>
<td style="text-align:left">boolean / string / number</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">active-color</td>
<td style="text-align:left">switch 打开时的背景色</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">#409EFF</td>
</tr>
<tr>
<td style="text-align:left">inactive-color</td>
<td style="text-align:left">switch 关闭时的背景色</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">#C0CCDA</td>
</tr>
<tr>
<td style="text-align:left">name</td>
<td style="text-align:left">switch 对应的 name 属性</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Events"><a href="#Events" class="headerlink" title="Events"></a>Events</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">事件名称</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">回调参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">change</td>
<td style="text-align:left">switch 状态发生变化时的回调函数</td>
<td style="text-align:left">新状态的值</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Methods-1"><a href="#Methods-1" class="headerlink" title="Methods"></a>Methods</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">方法名</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">focus</td>
<td style="text-align:left">使 Switch 获取焦点</td>
<td style="text-align:left">-</td>
</tr>
</tbody>
</table>
</div>
<h4 id="Tabs-标签页"><a href="#Tabs-标签页" class="headerlink" title="Tabs 标签页"></a>Tabs 标签页</h4><p>分割内容上有关联但属于不同类别的数据集合。</p>
<h5 id="基础用法-1"><a href="#基础用法-1" class="headerlink" title="基础用法"></a>基础用法</h5><p>基础的、简洁的标签页。</p>
<p>一个栗子</p>
<p><strong>Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 <code>value</code> 属性来指定当前选中的标签页。</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;el-tabs v-model=&quot;activeName&quot; @tab-click=&quot;handleClick&quot;&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;用户管理&quot; name=&quot;first&quot;&gt;用户管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;配置管理&quot; name=&quot;second&quot;&gt;配置管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;角色管理&quot; name=&quot;third&quot;&gt;角色管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;定时任务补偿&quot; name=&quot;fourth&quot;&gt;定时任务补偿&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;/el-tabs&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        activeName: &#x27;second&#x27;</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      handleClick(tab, event) &#123;</span><br><span class="line">        console.log(tab, event);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="选项卡样式"><a href="#选项卡样式" class="headerlink" title="选项卡样式"></a>选项卡样式</h5><p>选项卡样式的标签页</p>
<p><strong>只需要设置 <code>type</code> 属性为 <code>card</code> 就可以使选项卡改变为标签风格。</strong></p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;el-tabs v-model=&quot;activeName2&quot; type=&quot;card&quot; @tab-click=&quot;handleClick&quot;&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;用户管理&quot; name=&quot;first&quot;&gt;用户管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;配置管理&quot; name=&quot;second&quot;&gt;配置管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;角色管理&quot; name=&quot;third&quot;&gt;角色管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;定时任务补偿&quot; name=&quot;fourth&quot;&gt;定时任务补偿&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;/el-tabs&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        activeName2: &#x27;first&#x27;</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      handleClick(tab, event) &#123;</span><br><span class="line">        console.log(tab, event);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="卡片化"><a href="#卡片化" class="headerlink" title="卡片化"></a>卡片化</h5><p>卡片化的标签。</p>
<p><strong>将 <code>type</code> 设置为 <code>border-card</code> 。</strong></p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-tabs type=&quot;border-card&quot;&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;用户管理&quot;&gt;用户管理&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;配置管理&quot;&gt;配置管理&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;角色管理&quot;&gt;角色管理&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;定时任务补偿&quot;&gt;定时任务补偿&lt;/el-tab-pane&gt;</span><br><span class="line">&lt;/el-tabs&gt;</span><br></pre></td></tr></table></figure>
<h5 id="位置"><a href="#位置" class="headerlink" title="位置"></a>位置</h5><p>可以通过 <code>top-position</code> 设置标签的位置。</p>
<p><strong>标签一共有四个方向的设置 <code>tabPosition=&quot;left|right|top|bottom&quot;</code></strong></p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;el-radio-group v-model=&quot;tabPosition&quot; style=&quot;margin-bottom: 30px;&quot;&gt;</span><br><span class="line">    &lt;el-radio-button label=&quot;top&quot;&gt;top&lt;/el-radio-button&gt;</span><br><span class="line">    &lt;el-radio-button label=&quot;right&quot;&gt;right&lt;/el-radio-button&gt;</span><br><span class="line">    &lt;el-radio-button label=&quot;bottom&quot;&gt;bottom&lt;/el-radio-button&gt;</span><br><span class="line">    &lt;el-radio-button label=&quot;left&quot;&gt;left&lt;/el-radio-button&gt;</span><br><span class="line">  &lt;/el-radio-group&gt;</span><br><span class="line"></span><br><span class="line">  &lt;el-tabs :tab-position=&quot;tabPosition&quot; style=&quot;height: 200px;&quot;&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;用户管理&quot;&gt;用户管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;配置管理&quot;&gt;配置管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;角色管理&quot;&gt;角色管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;定时任务补偿&quot;&gt;定时任务补偿&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;/el-tabs&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        tabPosition: &#x27;top&#x27;</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="自定义标签页"><a href="#自定义标签页" class="headerlink" title="自定义标签页"></a>自定义标签页</h5><p>可以通过具名 <code>slot</code> 来实现自定义标签页的内容。</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-tabs type=&quot;border-card&quot;&gt;</span><br><span class="line">  &lt;el-tab-pane&gt;</span><br><span class="line">    &lt;span slot=&quot;label&quot;&gt;&lt;i class=&quot;el-icon-date&quot;&gt;&lt;/i&gt; 我的行程&lt;/span&gt;</span><br><span class="line">    我的行程</span><br><span class="line">  &lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;消息中心&quot;&gt;消息中心&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;角色管理&quot;&gt;角色管理&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;定时任务补偿&quot;&gt;定时任务补偿&lt;/el-tab-pane&gt;</span><br><span class="line">&lt;/el-tabs&gt;</span><br></pre></td></tr></table></figure>
<p><img src="http://localhost:4000/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/001.png" alt></p>
<h5 id="动态增减标签页"><a href="#动态增减标签页" class="headerlink" title="动态增减标签页"></a>动态增减标签页</h5><p>增减标签页按钮只能在选项卡样式的标签下使用</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-tabs v-model=&quot;editableTabsValue&quot; type=&quot;card&quot; editable @edit=&quot;handleTabsEdit&quot;&gt;</span><br><span class="line">  &lt;el-tab-pane</span><br><span class="line">    :key=&quot;item.name&quot;</span><br><span class="line">    v-for=&quot;(item, index) in editableTabs&quot;</span><br><span class="line">    :label=&quot;item.title&quot;</span><br><span class="line">    :name=&quot;item.name&quot;</span><br><span class="line">  &gt;</span><br><span class="line">    &#123;&#123;item.content&#125;&#125;</span><br><span class="line">  &lt;/el-tab-pane&gt;</span><br><span class="line">&lt;/el-tabs&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        editableTabsValue: &#x27;2&#x27;,</span><br><span class="line">        editableTabs: [&#123;</span><br><span class="line">          title: &#x27;Tab 1&#x27;,</span><br><span class="line">          name: &#x27;1&#x27;,</span><br><span class="line">          content: &#x27;Tab 1 content&#x27;</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">          title: &#x27;Tab 2&#x27;,</span><br><span class="line">          name: &#x27;2&#x27;,</span><br><span class="line">          content: &#x27;Tab 2 content&#x27;</span><br><span class="line">        &#125;],</span><br><span class="line">        tabIndex: 2</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      handleTabsEdit(targetName, action) &#123;</span><br><span class="line">        if (action === &#x27;add&#x27;) &#123;</span><br><span class="line">          let newTabName = ++this.tabIndex + &#x27;&#x27;;</span><br><span class="line">          this.editableTabs.push(&#123;</span><br><span class="line">            title: &#x27;New Tab&#x27;,</span><br><span class="line">            name: newTabName,</span><br><span class="line">            content: &#x27;New Tab content&#x27;</span><br><span class="line">          &#125;);</span><br><span class="line">          this.editableTabsValue = newTabName;</span><br><span class="line">        &#125;</span><br><span class="line">        if (action === &#x27;remove&#x27;) &#123;</span><br><span class="line">          let tabs = this.editableTabs;</span><br><span class="line">          let activeName = this.editableTabsValue;</span><br><span class="line">          if (activeName === targetName) &#123;</span><br><span class="line">            tabs.forEach((tab, index) =&gt; &#123;</span><br><span class="line">              if (tab.name === targetName) &#123;</span><br><span class="line">                let nextTab = tabs[index + 1] || tabs[index - 1];</span><br><span class="line">                if (nextTab) &#123;</span><br><span class="line">                  activeName = nextTab.name;</span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;);</span><br><span class="line">          &#125;</span><br><span class="line">          </span><br><span class="line">          this.editableTabsValue = activeName;</span><br><span class="line">          this.editableTabs = tabs.filter(tab =&gt; tab.name !== targetName);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="自定义增加标签页触发器"><a href="#自定义增加标签页触发器" class="headerlink" title="自定义增加标签页触发器"></a>自定义增加标签页触发器</h5><p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line">&lt;div style=&quot;margin-bottom: 20px;&quot;&gt;</span><br><span class="line">  &lt;el-button</span><br><span class="line">    size=&quot;small&quot;</span><br><span class="line">    @click=&quot;addTab(editableTabsValue2)&quot;</span><br><span class="line">  &gt;</span><br><span class="line">    add tab</span><br><span class="line">  &lt;/el-button&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;el-tabs v-model=&quot;editableTabsValue2&quot; type=&quot;card&quot; closable @tab-remove=&quot;removeTab&quot;&gt;</span><br><span class="line">  &lt;el-tab-pane</span><br><span class="line">    v-for=&quot;(item, index) in editableTabs2&quot;</span><br><span class="line">    :key=&quot;item.name&quot;</span><br><span class="line">    :label=&quot;item.title&quot;</span><br><span class="line">    :name=&quot;item.name&quot;</span><br><span class="line">  &gt;</span><br><span class="line">    &#123;&#123;item.content&#125;&#125;</span><br><span class="line">  &lt;/el-tab-pane&gt;</span><br><span class="line">&lt;/el-tabs&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        editableTabsValue2: &#x27;2&#x27;,</span><br><span class="line">        editableTabs2: [&#123;</span><br><span class="line">          title: &#x27;Tab 1&#x27;,</span><br><span class="line">          name: &#x27;1&#x27;,</span><br><span class="line">          content: &#x27;Tab 1 content&#x27;</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">          title: &#x27;Tab 2&#x27;,</span><br><span class="line">          name: &#x27;2&#x27;,</span><br><span class="line">          content: &#x27;Tab 2 content&#x27;</span><br><span class="line">        &#125;],</span><br><span class="line">        tabIndex: 2</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      addTab(targetName) &#123;</span><br><span class="line">        let newTabName = ++this.tabIndex + &#x27;&#x27;;</span><br><span class="line">        this.editableTabs2.push(&#123;</span><br><span class="line">          title: &#x27;New Tab&#x27;,</span><br><span class="line">          name: newTabName,</span><br><span class="line">          content: &#x27;New Tab content&#x27;</span><br><span class="line">        &#125;);</span><br><span class="line">        this.editableTabsValue2 = newTabName;</span><br><span class="line">      &#125;,</span><br><span class="line">      removeTab(targetName) &#123;</span><br><span class="line">        let tabs = this.editableTabs2;</span><br><span class="line">        let activeName = this.editableTabsValue2;</span><br><span class="line">        if (activeName === targetName) &#123;</span><br><span class="line">          tabs.forEach((tab, index) =&gt; &#123;</span><br><span class="line">            if (tab.name === targetName) &#123;</span><br><span class="line">              let nextTab = tabs[index + 1] || tabs[index - 1];</span><br><span class="line">              if (nextTab) &#123;</span><br><span class="line">                activeName = nextTab.name;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        this.editableTabsValue2 = activeName;</span><br><span class="line">        this.editableTabs2 = tabs.filter(tab =&gt; tab.name !== targetName);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="Tabs-Attributes"><a href="#Tabs-Attributes" class="headerlink" title="Tabs Attributes"></a>Tabs Attributes</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">可选值</th>
<th style="text-align:left">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">type</td>
<td style="text-align:left">风格类型</td>
<td style="text-align:left">string</td>
<td style="text-align:left">card/border-card</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">closable</td>
<td style="text-align:left">标签是否可关闭</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">addable</td>
<td style="text-align:left">标签是否可增加</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">editable</td>
<td style="text-align:left">标签是否同时可增加和关闭</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">value</td>
<td style="text-align:left">绑定值，选中选项卡的 name</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">第一个选项卡的 name</td>
</tr>
<tr>
<td style="text-align:left">tab-position</td>
<td style="text-align:left">选项卡所在位置</td>
<td style="text-align:left">string</td>
<td style="text-align:left">top/right/bottom/left</td>
<td style="text-align:left">top</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Tabs-Events"><a href="#Tabs-Events" class="headerlink" title="Tabs Events"></a>Tabs Events</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">事件名称</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">回调参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">tab-click</td>
<td style="text-align:left">tab 被选中时触发</td>
<td style="text-align:left">被选中的标签 tab 实例</td>
</tr>
<tr>
<td style="text-align:left">tab-remove</td>
<td style="text-align:left">点击 tab 移除按钮后触发</td>
<td style="text-align:left">被删除的标签的 name</td>
</tr>
<tr>
<td style="text-align:left">tab-add</td>
<td style="text-align:left">点击 tabs 的新增按钮后触发</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">edit</td>
<td style="text-align:left">点击 tabs 的新增按钮或 tab 被关闭后触发</td>
<td style="text-align:left">(targetName, action)</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Tab-pane-Attribute"><a href="#Tab-pane-Attribute" class="headerlink" title="Tab-pane Attribute"></a>Tab-pane Attribute</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">可选值</th>
<th style="text-align:left">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">label</td>
<td style="text-align:left">选项卡标题</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">disabled</td>
<td style="text-align:left">是否禁用</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">name</td>
<td style="text-align:left">与选项卡 activeName 对应的标识符，表示选项卡别名</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">该选项卡在选项卡列表中的顺序值，如第一个选项卡则为’1’</td>
</tr>
<tr>
<td style="text-align:left">closable</td>
<td style="text-align:left">标签是否可关闭</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
</tbody>
</table>
</div>
<h4 id="el-input-输入框"><a href="#el-input-输入框" class="headerlink" title="el-input 输入框"></a>el-input 输入框</h4><p>通过鼠标或键盘输入字符</p>
<h5 id="带-icon-的输入框"><a href="#带-icon-的输入框" class="headerlink" title="带 icon 的输入框"></a>带 icon 的输入框</h5><blockquote>
<p><strong>可以通过 <code>prefix-icon</code> 和 <code>suffix-icon</code> 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。</strong></p>
</blockquote>
<h6 id="使用属性方式"><a href="#使用属性方式" class="headerlink" title="使用属性方式"></a>使用属性方式</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;demo-input-suffix&quot;&gt;</span><br><span class="line">  属性方式：</span><br><span class="line">  &lt;el-input</span><br><span class="line">    placeholder=&quot;请选择日期&quot;</span><br><span class="line">    suffix-icon=&quot;el-icon-date&quot;</span><br><span class="line">    v-model=&quot;input1&quot;&gt;</span><br><span class="line">  &lt;/el-input&gt;</span><br><span class="line">  &lt;el-input</span><br><span class="line">    placeholder=&quot;请输入内容&quot;</span><br><span class="line">    prefix-icon=&quot;el-icon-search&quot;</span><br><span class="line">    v-model=&quot;input2&quot;&gt;</span><br><span class="line">  &lt;/el-input&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h6 id="使用-slot-方式"><a href="#使用-slot-方式" class="headerlink" title="使用 slot 方式"></a>使用 slot 方式</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;demo-input-suffix&quot;&gt;</span><br><span class="line">  slot 方式：</span><br><span class="line">  &lt;el-input</span><br><span class="line">    placeholder=&quot;请选择日期&quot;</span><br><span class="line">    v-model=&quot;input3&quot;&gt;</span><br><span class="line">    &lt;i slot=&quot;suffix&quot; class=&quot;el-input__icon el-icon-date&quot;&gt;&lt;/i&gt;</span><br><span class="line">  &lt;/el-input&gt;</span><br><span class="line">  &lt;el-input</span><br><span class="line">    placeholder=&quot;请输入内容&quot;</span><br><span class="line">    v-model=&quot;input4&quot;&gt;</span><br><span class="line">    &lt;i slot=&quot;prefix&quot; class=&quot;el-input__icon el-icon-search&quot;&gt;&lt;/i&gt;</span><br><span class="line">  &lt;/el-input&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h4 id="layout-布局"><a href="#layout-布局" class="headerlink" title="layout 布局"></a>layout 布局</h4><p>通过 row 和 col 组件，并通过 col 组件的 <code>span</code> 属性，我们就可以自由的组合布局.<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:span</span>=<span class="string">&quot;12&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:span</span>=<span class="string">&quot;12&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">el-row</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>常用的一些属性介绍：</p>
<ul>
<li><p>分栏间隔</p>
<p>row 组件提供 <code>gutter</code> 属性来指定每一栏之间的间隔，默认间隔为 0 。</p>
</li>
<li><p>分栏偏移 支持偏移指定的栏数</p>
<p>通过制定 col 组件的 <code>offset</code> 属性可以指定分栏偏离的栏数。</p>
</li>
<li><p>对齐方式 通过 <code>flex</code> 布局来对分栏进行灵活的对齐   </p>
<p>将 <code>type</code> 属性赋值为 ‘flex’, 可以启用 flex 布局，并可通过 <code>justify</code> 属性来指定 ‘start, center, end, space-between, space-around’ 其中的值来定义子元素的排版方式。</p>
</li>
<li><p>响应式布局   </p>
<p>参照了 Bootstrap 的响应式设计，预设了五个响应尺寸，<code>xs, sm, md, lg, 和 xl</code> 。</p>
</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/01/vuejs%E5%B8%B8%E7%94%A8api/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/07/01/vuejs%E5%B8%B8%E7%94%A8api/" class="post-title-link" itemprop="url">vuejs常用api</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-01 09:28:54" itemprop="dateCreated datePublished" datetime="2020-07-01T09:28:54+08:00">2020-07-01</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>455</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h4 id="vm-nextTick-callback"><a href="#vm-nextTick-callback" class="headerlink" title="vm.$nextTick([callback])"></a>vm.$nextTick([callback])</h4><ul>
<li><h5 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h5><ul>
<li><code>&#123;Function&#125; [callback]</code></li>
</ul>
</li>
<li><h5 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h5><p>将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法<code>Vue.nextTick</code>一样，不同的是回调的<code>this</code>自动绑定到调用它的实例上。</p>
</li>
<li><h5 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">        <span class="attr">example</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="comment">// 修改数据</span></span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">message</span> = <span class="string">&#x27;changed&#x27;</span></span><br><span class="line">            <span class="comment">// DOM还没有更新</span></span><br><span class="line">            <span class="variable language_">this</span>.$nextTick(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">                <span class="comment">// DOM现在更新了</span></span><br><span class="line">                <span class="comment">// `this`绑定到当前实例</span></span><br><span class="line">                <span class="variable language_">this</span>.<span class="title function_">doSomethingElse</span>()</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h5 id="一点理解"><a href="#一点理解" class="headerlink" title="一点理解"></a>一点理解</h5><p><code>nextTick()</code> 函数是将回调函数延迟在下一次 dom 更新数据后调用；简单的理解就是： <em>当数据更新了，在 dom 中渲染后，自动执行该函数。</em></p>
</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  


  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/33/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/33/">33</a><span class="page-number current">34</span><a class="page-number" href="/page/35/">35</a><a class="extend next" rel="next" href="/page/35/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">田园隐士</p>
  <div class="site-description" itemprop="description">talk is cheap, show me the code</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">347</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">53</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">115</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">田园隐士</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">587k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">8:53</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  

  

</body>
</html>
